<template>
  <div class="newClaim">
    <div class="brand">
      <h3>品牌证明信息</h3>
      <div class="brandCertificate">
        <p>商品注册证书<em class="must">*</em>&nbsp;&nbsp;<span>格式为png，jpg，JPEG格式，5M以内</span></p>
        <div class="imgUpload">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :limit="1"
            :on-exceed="exceedNum"
          >
            <i class="iconfont iconbrandentry_btn_uoload" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="company brand">
      <h3>公司证明信息</h3>
      <el-form ref="ruleForm" label-position="top" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入公司名称" />
        </el-form-item>
        <div class="brandCertificate">
          <p>营业执照<em class="must">*</em>&nbsp;&nbsp;<span>格式为png，jpg，JPEG格式，5M以内</span></p>
          <div class="imgUpload">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :before-upload="beforeAvatarUpload"
              :limit="1"
              :on-exceed="exceedNum"
            >
              <i class="iconfont iconbrandentry_btn_uoload" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
        <el-form-item label="公司地址" prop="site">
          <el-input v-model="ruleForm.site" placeholder="请输入公司名称" />
        </el-form-item>
      </el-form>

    </div>
    <button class="btn" @click="claimSubmit">提交</button>

    <!-- 对话框 -->
    <div class="affirm">
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="584px"
        center
        :show-close="false"
      >
        <i class="iconfont iconbrandinformation_icon_duihao" />
        <br>
        <span class="affirmTxt"><p>提交成功！</p>后台审核结果，我们将会以短信形式通知到您。</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">好的</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 多次提交 -->
    <div class="affirm">
      <el-dialog
        :visible.sync="frequency"
        width="584px"
        center
        :show-close="false"
      >
        <i class="iconfont iconbands_icon_tanhao" />
        <br>
        <span class="affirmTxt">您已提交认领需求，请等待审核结果！</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="frequency = false">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewClaim',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imageUrl: '',
      ruleForm: {
        name: '',
        site: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        site: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
          { min: 1, max: 200, message: '长度 200 个字符以内', trigger: 'blur' }
        ]
      },
      centerDialogVisible: false,
      frequencyNum: 0,
      frequency: false
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 验证图片格式
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw)
    // },
    beforeAvatarUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error('上传头像图片只能是 JPG png jpeg 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return (isPNG || isJPEG || isJPG) && isLt2M
    },
    // 超出个数
    exceedNum() {
      this.$message({
        message: '只允许上传一张证书',
        type: 'warning'
      })
    },
    // 提交
    claimSubmit() {
      this.frequencyNum += 1
      if (this.frequencyNum >= 2) {
        this.frequency = true
      } else {
        this.centerDialogVisible = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.newClaim{
  width: 1200px;
  margin: 20px auto;
  .brand{
    width: 100%;
    background-color: #fff;
    margin: 20px 0;
    height: 467px;
    h3{
      padding: 26px 40px;
      font-size:18px;
      color:rgba(51,51,51,1);
      border-bottom: 1px solid #F6F6F6;
    }
    .brandCertificate{
      padding: 20px 40px;
      p{
        border-bottom: 1px solid #F6F6F6;
        padding-bottom: 20px;
        font-size:18px;
        .must{
          color: red;
        }
        span{
          font-size:14px;
          line-height:19px;
          color:#B7B7B7;
        }
      }
      .imgUpload{
        i{
          font-size: 30px;
          color: #FFFFFF;
          line-height: 235px;
        }
      }
    }
  }
  .company{
    height: 650px;
  }
  .btn{
    width:220px;
    height:50px;
    background:rgba(65,122,239,1);
    border-radius:5px;
    margin: 20px auto;
    font-size: 18px;
    color: #fff;
    margin-left: 490px;
  }
  .affirm{
    i{
      font-size: 65px;
      text-align: center;
      margin: 0 auto;
    }
    .affirmTxt{
      display: block;
      margin-top: 20px;
      font-size:20px;
      line-height:36px;
      color:rgba(51,51,51,1);
      text-align: center;
    }
    button{
      cursor: pointer;
    }

    .el-button{
      width:170px;
      height:42px;
      background:rgba(65,122,239,1);
      border-radius:4px;
    }
  }
}
</style>

